<template>
<div class="copy">
        <div class="bottom">
            <div class="tao" :class="{
                bgc: height < 400,
                bgcN: height >= 400
            }" @click="funTop"></div>
            <div class="cart" @click="funCart">
                <van-icon name="cart-o" size="0.48rem" />
                <p>购物车</p>
            </div>
            <div class="mySelf" @click="funMy">
                <van-icon name="smile-o" size="0.48rem" />
                <p>我的</p>
            </div>
        </div>
</div>
</template>

<script>
export default {
    name: "bottomNav",
    data() {
        return {
            height: 0
        }
    },
    methods: {
        funTop() {
            window.scrollTo({
                top: 0,
                behavior: "smooth"
            })
        },
        funMy() {
            if (localStorage.getItem("token")) {
                this.$router.push("/my")
            } else {

                this.$router.push("/loginCode")
            }
        },
        funCart() {
            if (localStorage.getItem("token")) {
                this.$router.push("/cart")
            } else {

                this.$router.push("/loginCode")
            }
        }

    },
    mounted() {
        window.onscroll = () => {
            this.height = document.documentElement.scrollTop
        }
    }
}
</script>

<style lang="scss" scoped>
.copy{
        height: 0.9rem;
}
.bottom {
    height: 0.9rem;
    width: 100%;
    background: #fff;
    position: fixed;
    bottom: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.bottom>div {
    width: 0.75rem;
    height: 0.75rem;
}

.bottom .tao {
    border-radius: 50%;
}

.bottom .bgc {
    background: #ff6e07 url("https://img.alicdn.com/imgextra/i1/O1CN01oAxBQ81qF1EZtn4Rq_!!6000000005465-2-tps-108-108.png") no-repeat center / 100%;
}

.bottom .bgcN {
    background: #ff6e07 url("https://img.alicdn.com/imgextra/i3/O1CN01r7d0bs1XQwqepToWX_!!6000000002919-2-tps-108-108.png") no-repeat center / 100%;
}

.bottom .cart {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    color: #666666;
    font-size: 0.2rem;
}

.bottom .mySelf {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    color: #666666;
    font-size: 0.2rem;
}
</style>